<html>
	<head>
		<title>Transi&ccedil;&atilde;o de Backgrounds - Teste</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript" src="js/systeminfo.js"></script>
		<script>
				$(document).ready(function(){
				if(wi>=1000&&wi<1100){
					$("#img-fundo1").animate({ width: wi+210 }, 2);
					$("#img-fundo2").animate({ width: wi+210 }, 2);
				}
				else if(wi>=1200&&wi<1300){
					$("#img-fundo1").animate({ width: wi+10 }, 2);
					$("#img-fundo2").animate({ width: wi+10 }, 2);
				}
				else if(he>=800&&he<=810){
					$("#img-fundo1").animate({ width: wi+10 }, 2);    
					$("#img-fundo2").animate({ width: wi+10 }, 2);                                  
				}
				else if(wi>=1100&&wi<1400){
					$("#img-fundo1").animate({ width: wi+10 }, 2);
					$("#img-fundo2").animate({ width: wi+10 }, 2);
				}
				else if(wi>=1400&&wi<1500){
					$("#img-fundo1").animate({ width: wi+10 }, 2);
					$("#img-fundo2").animate({ width: wi+10 }, 2);
				}
				else if(wi>1500&&wi<1700){
					$("#img-fundo1").animate({ width: wi+10 }, 2);
					$("#img-fundo2").animate({ width: wi+10 }, 2);
				}
				else if(wi>=1700){
					$("#img-fundo1").animate({ width: wi+10 }, 2);
					$("#img-fundo2").animate({ width: wi+10 }, 2);
				}
			});
		</script>
	</head>
	<body onload="iniciaTransicoes()">
		<img id="img-fundo1" name="img-fundo1" class="pp" alt="Atelie Ivanilde Messias" src="imagens/home1.jpg">
		<img id="img-fundo2" name="img-fundo2" class="sp" alt="Atelie Ivanilde Messias" src="imagens/home2.jpg">
		<div class="menu">
			<img id="menu" src="imagens/menu.png">
			<ul>
				<li><a id="menu-home" href="?" onclick="">HOME</a></li>
				<li><a id="menu-nossotrabalho" href="?" onclick="">NOSSO TRABALHO</a></li>
				<li><a id="menu-empresa" href="?" onclick="">EMPRESA</a></li>
				<li><a id="menu-dicas" href="?" onclick="">DICAS</a></li>
				<li><a id="menu-contato" href="?" onclick="">CONTATO</a></li>
			</ul>
        </div>
	</body>
	<script>
		var pa = 1;
		var auto = true;
		function iniciaTransicoes(){
				setTimeout("alteraBgPp()", 5000);
		}
		function alteraMenus1(){
			document.getElementById("menu-home").style.color = "#c83d5b";
			document.getElementById("menu-nossotrabalho").style.color = "#c83d5b";
			document.getElementById("menu-empresa").style.color = "#c83d5b";
			document.getElementById("menu-dicas").style.color = "#c83d5b";
			document.getElementById("menu-contato").style.color = "#c83d5b";
		}
		function alteraMenus2(){
			document.getElementById("menu-home").style.color = "#fff";
			document.getElementById("menu-nossotrabalho").style.color = "#fff";
			document.getElementById("menu-empresa").style.color = "#fff";
			document.getElementById("menu-dicas").style.color = "#fff";
			document.getElementById("menu-contato").style.color = "#fff";
		}
		function alteraBgPp() {
			if(auto == true){
				$("#img-fundo"+pa).fadeOut(3000);
				setTimeout("alteraBgSp()", 3000);
			}
		}
		function alteraBgSp(){
			if(auto == true){
				document.getElementById("img-fundo"+pa).className = "sp";
				var sp = pa;
				
				if(pa == 1){
						alteraMenus1();
						pa = 2;
				} else {
						alteraMenus2();
						pa = 1;
				}
				document.getElementById("img-fundo"+pa).className = "pp";
				$("#img-fundo"+sp).fadeIn("slow");
				setTimeout("alteraBgPp()", 5000);
			}
		}
	</script>
</html>
